<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul ul {
            display: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <div>1</div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </li>
        <li>
            <div>2</div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </li>
        <li>
            <div>3</div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </li>
        <li>
            <div>4</div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </li>
    </ul>
    <script>
        function getStyleByEl(el, styleName) {
            return getComputedStyle(el)[styleName];
        }
        function getDisplayByEl(el) {
            return getStyleByEl(el, 'display');
        }
        var displayVal = {
            block: 'block',
            none: 'none'
        }
        const divs = document.querySelectorAll('ul li div');
        for (let index = 0; index < divs.length; index++) {
            const element = divs[index];
            const currEl = element;
            const menu = currEl.parentNode.children[1];
            element.addEventListener('click', function(ev) {
                // console.log('click', ev.target);
                // console.log(menu);
                menu.style.display = displayVal.block;
                ev.stopPropagation();
                divs.forEach(div => {
                    const divSibiling = div.parentNode.children[1];
                    if(menu !== divSibiling) {
                        // console.log(getDisplayByEl(divSibiling))
                        if(getDisplayByEl(divSibiling) === displayVal.block) {
                            divSibiling.style.display = displayVal.none;
                        }
                    }
                })
            })
            document.body.addEventListener('click', function(ev) {
                // console.log('clickout', ev.target);
                const clickTarget = ev.target;
                if(!(element.parentNode.contains(clickTarget))) {
                    menu.style.display = displayVal.none;
                }
            })
        }
    </script>
</body>
</html>